<template>
	<div>
		<mt-header fixed title="vue2.0开发项目">
		</mt-header>
		<div class="back" v-if="isshow" @click="backto">返回</div>
		<router-view></router-view>
		<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/userinfo">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/car">
				<span class="mui-icon mui-icon-contact">
					<span class="mui-badge" id="baga">0</span>
				</span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</router-link>
		</nav>
	</div>
</template>
<script>
// 负责导出这个.vue组件对象 (它本质上是一个Vue对象,所以Vue中该定义的元素都可以使用) 
import { vm, COUNTSTR } from './kits/vm.js';
vm.$on(COUNTSTR, function (count) {
	var baga = document.querySelector('#baga');
	baga.innerHTML = parseInt(baga.innerHTML) + count;
})
export default {
	data() { //es6语法
		return {
			isshow: false
		}
	},
	methods: {
		backto() {
			this.$router.go(-1);
		}
	},
	created() {

	},
	watch: {
		'$route': function (newroute, oldroute) {
			if (newroute.path.toLowerCase() == '/home') {
				this.isshow = false;
			} else {
				this.isshow = true;
			}
		}
	}
}
</script>

<style scoped>
/* scoped表示样式给当前页面使用 */

.router-link-active[data-v-4491e26c] {
	color: #007aff;
}

.back {
	position: absolute;
	top: 10px;
	left: 8px;
	color: #fff;
	z-index: 999;
	font-size: 14px;
}
</style>

